import React, { Component } from 'react'
import PropType from 'prop-types'
export default class Footer extends Component {

  // props类型限制
  static propType = {
    todos: PropType.array.isRequired,
    clearAllDone: PropType.func.isRequired,
    checkAllTodo: PropType.func.isRequired,
  }

  render() {
    const { todos } = this.props
    // 完成个数
    // const doneCount = todos.filter(todo => todo.done).length
    const doneCount = todos.reduce((pre, todo) => pre + todo.done, 0)
    // 总数
    const total = todos.length
    return (
      <div className="todo-footer">
        <label>
          <input onChange={this.props.checkAllTodo} checked={doneCount === total && total !== 0} type="checkbox" />
        </label>
        <span>
          <span>已完成（{doneCount}）</span> / 全部（{total}）
        </span>
        <button onClick={this.props.clearAllDone} className="btn btn-danger">清除已完成任务</button>
      </div>
    )
  }
}
